<script lang="ts" setup>
  import { ref } from "vue";

  const visible = ref(false);

  const handleToggle = () => {
    visible.value = !visible.value;
  };
</script>

<template>
  <div class="umrp-sub-menu">
    <div class="main-menu" @click="handleToggle">
      <div class="title">
        <icon-all-application :size="14" theme="filled" fill="#999999" />
        <slot name="title"></slot>
      </div>
      <icon-down theme="filled" v-if="visible" />
      <icon-up theme="filled" v-else />
    </div>
    <div class="child-menu" v-if="visible">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .umrp-sub-menu {
    .main-menu {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #333;
      padding: 12px 8px;
      font-size: 16px;
      line-height: 16px;

      .title {
        display: flex;
        align-items: center;
        gap: 8px;
      }
    }

    .child-menu {
      ::v-deep(.i-icon) {
        display: none;
      }
    }
  }
</style>
